<template>
  <div class="common-layout">
    <el-container class="container">
      <el-header class="header">
        <Header></Header>
      </el-header>
      <el-container class="comt">
        <el-aside class="aside" width="200px">

          <!-- <el-row> -->
          <!-- 渲染导航栏 -->
          <el-col :span="12" class="col menuH">
            <!-- 一级导航 -->
            <el-menu class="menuH" router unique-opened :default-openeds="openeds" :default-active="'/'+active">
              <template v-for="itme in store.state.pagedata">
                <el-sub-menu :index="itme.path" v-if="itme.parent" :key="itme.path">
                  <template #title>
                    <span>{{ itme.name }}</span>
                  </template>
                  <!-- 二级导航 -->
                  <el-menu-item :index="(itme.path + sub.path)" v-for="sub in itme.parent" :key="sub.path">
                    {{ sub.name }}
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item :index="itme.path" v-else :key="itme.ken">
                  <span>{{ itme.name }}</span>
                </el-menu-item>
              </template>
            </el-menu>
          </el-col>
          <!-- </el-row> -->
        </el-aside>
        <el-main class="main">
          <div>
            <el-breadcrumb class="brand" :separator-icon="ArrowRight">
              <div v-if="num == true">
                <!-- :to="{ path: '/' }" -->
                <el-breadcrumb-item>{{ arr[0] }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ arr[1] }}</el-breadcrumb-item>
              </div>
              <div v-if="num == false">
                <el-breadcrumb-item>{{ arr[0] }}</el-breadcrumb-item>
              </div>
            </el-breadcrumb>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, watch } from 'vue';
import { useStore } from 'vuex';
import Header from './Header.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const store = useStore()
const router = useRouter()

// 路由相关变量值
const num = ref(true)
const arr: any = ref([])
const userRes: any = ref([])
const add: any = ref([])
// 当前路由地址
const rout = ref('')
// 获取路由信息
const routData: any = ref([])
// 默认展开项
const openeds = ref(['/user'])
const active:any = ref()

onMounted(() => {
  getd()
})

// 监听路由地址变化
watch(
  () => router.currentRoute.value.name,
  (newRouterName: any) => {
    // 获取所有路由信息
    add.value = router.options.routes[0].children
    // 获取当前路由信息
    rout.value = newRouterName
    active.value = rout.value
    if(active.value === 'userList'){
      active.value = 'user/'+active.value
    }if(active.value === 'userChart'){
      active.value = 'user/'+active.value
    }
  },
  { immediate: true },
)
// 清洗路由数据
const getd = () => {
  // 将所用到的数组清空
  routData.value = []
  userRes.value = []
  arr.value = []
  // 遍历找出当前的值
  for (let i = 0; i < add.value.length; i++) {
    // user有二级路由，单独遍历处理
    if (add.value[i].name === 'user') {
      // user有两种情况分开判断
      if (rout.value === 'userList') {
        // 将当前路由的值，转化成要显示的值
        userRes.value = [add.value[i].idname, add.value[i].children[0].idname]
        // 将这个数据存本地，防止刷新页面丢失
        localStorage.setItem('data', userRes.value)
        // 这里取上面存的数据
        routData.value = localStorage.getItem('data')
        // 将数据进行分割成数组
        arr.value = routData.value.split(',')
        // 找到了就直接return出去，不在循环其他值
        return
      } else if (rout.value === 'userChart') {
        userRes.value = [add.value[i].idname, add.value[i].children[1].idname]
        localStorage.setItem('data', userRes.value)
        routData.value = localStorage.getItem('data')
        arr.value = routData.value.split(',')
        return
      }
      // 不是user时，就是没有二级路由时
    } else {
      if (add.value[i].name === rout.value) {
        userRes.value = [add.value[i].idname]
        localStorage.setItem('data', userRes.value)
        routData.value = localStorage.getItem('data')
        arr.value = [routData.value]
        return
      }
    }
  }
  // 最后根据长度显示不同内容
  if (routData.value.length == 0) {
    num.value = false
  } else {
    num.value = true
  }
}
// 监听当前路由变化，驱动页面数据发生变化
watch(
  () => rout.value,
  () => getd()
)

</script>

<style scoped>
.common-layout {
  height: 95vh;
}

.container {
  height: 100%;
}

.header {
  height: 100px;
  background-color: #f7f7f7;
}

.aside {
  background-color: white;
}

.main {
  background-color: #fff;
}

.el-col {
  max-width: 100%;
}

.brand {
  margin: 20px 0;
}
.menuH{
  height: 100%;
}
.comt{
  height: 500px;
}
</style>
